<template>
  <div>
    <el-button @click="add">新增</el-button>
    <!-- 点击新增按钮 打开Info对应的弹窗 通过传给子组件一个dialogVisible 来控制 -->
    <List ref="list" @edit="edit"></List>
    <Info ref="info" :isShow="isShow" :type="openType" @close="close" @update="update"></Info>
  </div>
</template>

<script>
import List from "./List.vue";
import Info from "./Info.vue";
export default {
  data() {
    return {
      isShow: false,
      openType: 'add'
    };
  },
  components: {
    List,
    Info,
  },
  methods: {
    add() {
      // 打开弹窗
      this.isShow = true;
      this.openType = 'add';
      this.$refs.info.setVal({
        pid: 0,
        catename: "",
        img: "",
        status: 1,
      });
    },
    edit(info) {
      // 打开弹窗
      this.isShow = true;
      this.openType = 'edit';
      this.$refs.info.setVal(info);
    },
    close() {
      // 关闭弹窗
      this.isShow = false;
    },
    update() {
      // 这个函数会在修改或者新增成功后执行，会触发list的重新加载
      this.$refs.list.getTableData();
    }
  },
};
</script>

<style>
</style>